<template>
    <div class="Reg">
       <!--logo-->
       <img class="logo" src="../assets/login/login.png" alt="">
        <!--气泡-->
        <span class="ball ball1"></span>
        <span class="ball ball2"></span>
        <span class="ball ball3"></span>
        <span class="ball ball4"></span>
        <!--下半部分-->
        <div class="login-form">
            <!--手机-->
            <div class="mobile">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tel"></use>
                </svg>
                <input type="number" placeholder="请输入手机号" v-model="mobile" oninput="if(value.length>11)value=value.slice(0,11)" />
            </div>
            <!--验证码-->
            <div class="code">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-codee"></use>
                </svg>
                <input type="text" placeholder="请输入验证码" v-model="code" />
                <span v-if="codeReady" class="reqBtn" @click="requsetCode">获取验证码</span>
                <span v-else class="reqBtn" @click="requsetCode">重新发送（ {{codeTime}}s ）</span>
            </div>
            <!--密码-->
            <div class="pwd">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon"></use>
                </svg>
                <input type="password" placeholder="请输入6-16位密码" v-model="password" />
            </div>
            <!--重复密码-->
            <div class="pwd">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon"></use>
                </svg>
                <input type="password" placeholder="请重复密码" v-model="repeatPwd" />
            </div>
            <!--确认-->
            <div class="confirm">
                <el-button :class="{on:regBtnState}" type="primary" :disabled="regBtnState" @click="regIn"><img v-if="regBtnState" src="../assets/login/reLoading.svg" alt="" class="regLoading">{{regBtnText}}</el-button>
            </div>
            <!--同意协议-->
            <p class="accept">点击注册即表示同意《花艺学院用户协议》</p>
            <!--已有账号 去登陆-->
            <p class="loginNow">已有账号，<strong @click="$router.replace('/login')">立即登录</strong></p>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Reg',
        data () {
            return {
                mobile:'',//注册手机号
                password:'',//密码
                repeatPwd:'',//重复密码
                code:'',//验证码
                regBtnState:false,//注册按钮状态
                regBtnText:'立即注册',//注册按钮状态

                codeReady:true,//是否可以点击获取验证码
                codeTime:60,//验证码时效
            }
        },
        props:['data'],
        methods:{
            //注册提交
            regIn(){
                //提交前验证
                if(!this.mobile||!this.password||!this.repeatPwd||!this.code){
                    this.$message.warning('请完善表单！亲~');
                    return;   
                }
                if(this.password != this.repeatPwd){
                    this.$message.warning('两次密码不一致！亲~');
                    return;
                };
                this.regBtnState=true;
                this.regBtnText='';
                //ajax
                this.Posthttp('/?method=flower.login.register',{mobile:this.mobile,password:this.password,code:this.code},(res)=>{
                    if(JSON.parse(res.bodyText).status == 1){
                        this.regBtnState = false;
                        this.regBtnText = '立即注册';
                        console.log(JSON.parse(res.bodyText));
                        window.localStorage.setItem('userInfo', JSON.stringify(JSON.parse(res.bodyText).data.member));//成功后储存用户
                        this.$message.success('注册成功！');
                        this.$router.replace('/bag');
                    }else{
                        this.regBtnState = false;
                        this.regBtnText = '立即注册';
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
            //获取验证码
            requsetCode(){
                if(!this.codeReady)return;
                //ajax
                this.Posthttp('/?method=flower.login.sendRegisterSms',{mobile:this.mobile},(res)=>{
                    if(JSON.parse(res.bodyText).status == 1){
                        this.codeReady = false;
                        this.$message.success('发送成功！');
                        this.codeTimer();
                    }else{
                        this.codeReady = true;
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
            //验证码时效倒计时
            codeTimer(){
                let that = this,
                    timer = setInterval(function(){ 
                        if(that.codeTime<2){
                            that.codeReady = true;
                            that.codeTime=60;//重新复原时效
                            clearInterval(timer);
                        }else{
                            that.codeTime--;
                        }
                    }, 1000);  
            },
        },
        //计算属性
        computed:{
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>

    $tColor: rgba(255, 180, 154,.8);/*基础文字色号*/

    .Reg {
        overflow-y: auto;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #d95627;
        .logo{
            width: 2.11rem;
            height: 1.44rem;
            position: absolute;
            left:0;
            right: 0;
            top: 1.1rem;
            margin: auto;
        }
        .ball{
            background-color: rgba(255, 196, 175,.3);
            border-radius: 100%;
            position: absolute;
        }
        .ball1{
            width: .2rem;
            height: .2rem;
            left: .45rem;
            top: 1.1rem;
            animation: balloon2 6s ease-in-out infinite;
        }
        .ball2{
            width: .4rem;
            height: .4rem;
            left: .8rem;;
            top: 1.18rem;
            animation: balloon1 8s ease-in-out infinite;
        }
        .ball3{
            width: .4rem;
            height: .4rem;
            right: .1rem;
            top: 2.1rem;
            animation: balloon1 8s ease-in-out infinite;
        }
        .ball4{
            width: .2rem;
            height: .2rem;
            right: .34rem;
            top: 2.7rem;
            animation: balloon2 8s ease-in-out infinite;
        }
        /*bottom*/
        .login-form{
            width: 80%;
            margin: 3.4rem auto 0;
            padding-bottom: .4rem;
            color: $tColor;
            .icon{
                position: absolute;
                left: 0;
                color: $tColor;
                font-size: .3rem;
                top: calc(50% - .15rem);
                &.on{
                    color: #d95627;
                }
            }
            input{
                width: 100%;
                height: 100%;
                border: 0;
                padding-left: .45rem;
                outline: 0;
                font-size: .28rem;
                color: #fff;
                background: transparent;
                &::placeholder{
                    color: $tColor;
                }
            }
            .mobile{
                position: relative;
                height: .8rem;
                border-bottom: 1px solid #eb693c;
            }
            .pwd{
                @extend .mobile;
                margin-top: .4rem;
            }
            .code{
                @extend .pwd;
                position: relative;
                input{
                    width: 50%;
                }
                .reqBtn{
                    position: absolute;
                    right: 0;
                    height: .8rem;
                    line-height: .8rem;
                    color: #fff;
                    font-size: .26rem;
                }
            }
            /*立即注册按钮*/
            .confirm{
                outline: none;
                margin-top: .8rem;
                border-radius: .4rem;
                overflow: hidden;
                text-align: center;
                button{
                    position: relative;
                    width: 100%;
                    height: .8rem;
                    border-radius: .4rem;
                    letter-spacing: 1px;
                    outline: none;
                    background: #ffe4da;
                    color: #d85529;
                    font-size: .28rem;
                    text-align: center;
                    transition: all .4s;
                    &.on{
                        width: .8rem;
                        height: .8rem;
                        border-radius: 100%;
                    }
                    .regLoading{
                        position: absolute;
                        width: .6rem;
                        height: .6rem;
                        left: calc(50% - .3rem);
                        top: calc(50% - .3rem);
                    }
                }
            }
            /*accept*/
            .accept{
                font-size: .22rem;
                text-align: center;
                margin-top: .16rem;
            }
            /*go login*/
            .loginNow{
                width: 100%;
                text-align: center;
                font-size: .26rem;
                margin-top: .4rem;
                strong{
                    font-weight: 600;
                    color: #fff;
                }
            }
        }
    }
</style>
